<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="uft-8">
    <title>DOM</title>
    <style>
        p {
            color: yellow;
            font-family: "arial", "sans-serif";
            font-size: 1.2em;
        }

        body {
            color: white;
            background-color: black;
        }

        .special {
            font-style: italic;
        }

        h2.special {
            text-transform: uppercase;
        }

        #purchases {
            border: thin solid white;
            background: #333;
            color: #ccc;
            padding: 1em;
        }

        #purchases li {
            font-weight: bold;
        }
    </style>
</head>
<body>
<p class="special">This paragraph has the special</p>
<h2 class="special">So does this headline</h2>
<ul id="purchases">
    <li class="sale">A thin of beans</li>
    <li class="sale">Cheese</li>
    <li class="sale">Milk</li>
</ul>
<p>This is just a test</p>
<p title="a gentle reminder">test</p>
<script>
    function nodes() {
        function getElementById() {
            document.getElementById('purchases');
            alert(typeof document.getElementById('purchaees'));
        }

        function getElementsByName() {
            document.getElementsByName('li');
            alert(document.getElementsByName('li').length);

            for (var i = 0; i < document.getElementsByName('li').length; i++) {
                alert(typeof document.getElementsByName('li')[i]);
            }

            function improve() {
                var items = document.getElementsByName('li');
                for (var i = 0; i < items.length; i++) {
                    alert(typeof items[i]);
                }
            }

            function getElementsByNameAll() {
                alert(document.getElementsByName('*').length);

                var shopping = document.getElementById('purchases');
                var items = shopping.getElementsByTagName('*');
                alert(items.length);

                for (i = 0; i < items.length; i++) {
                    alert(typeof items[i]);
                }
            }
        }

        function getElemensByClassName() {
            document.getElementsByClassName('sale');
            alert(document.getElementsByClassName('important sale').length);

            var shopping = document.getElementById('purchases');
            var sales = shopping.getElementsByTagName('sale');
            alert(sales.length);

            function getElementsByCalssName(node, className) {
                if (node.getElementsByTagName) {
                    return node.getElementsByClassName(className)
                } else {
                    var results = [];
                    var elems = node.getElementById('*');
                    for (var i = 0; i < elems.length; i++) {
                        if (elems[i].className.indexOf(className) != -1) {
                            results[results.length] = elems[i];
                        }
                    }
                    return results;
                }
            }

            function shop() {
                var shopping = document.getElementById('purchases');
                var sales = getElementsByTagName(shopping, 'sale');
                alert(sales.length);
            }
        }
    }

    function getAndSetAttribute() {
        var paras = document.getElementsByTagName('p');
        for (var i = 0; i < paras.length; i++) {
            alert(paras[i].getAttribute('title'));
        }

        function getAttribute() {
            var paras = document.getElementsByTagName('p');
            for (var i = 0; i < paras.length; i++) {
                var title = paras[i].getAttribute('title');
                if (title != null) {
                    alert(title);
                }
            }

            function better() {
                var paras = document.getElementsByTagName('p');
                for (var i = 0; i < paras.length; i++) {
                    var title = paras[i].getAttribute('title');
                    if (title) {
                        alert(title);
                    }
                }
            }
        }

        function setAttribute() {
            var shopping = document.getElementById('purchases');
            shopping.setAttribute('title', 'a list of goods');

            function prove() {
                var shopping = document.getElementById('purchases');
                alert(shopping.getAttribute('title'));
                shopping.setAttribute('title', 'a list of goods');
                alert(shopping.getAttribute('title'));
            }

            function change() {
                var paras = document.getElementsByTagName('p');
                for (var i = 0; i < paras.length; i++) {
                    var title = paras[i].getAttribute('title');
                    if (title) {
                        paras[i].setAttribute('title', 'brand new title text');
                        alert(paras[i].getAttribute('title'));
                    }
                }
            }
        }
    }
</script>
<p title="a gentle reminder">Don't gentle reminder</p>
</body>
</html>